<template>
  <div style="margin-right: 30px">
    <el-form ref="formObj" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="公告标题" prop="title">
        <el-input 
			maxLength="20" 
			v-model="form.title" 
			placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="公告内容" prop="content">
        <el-input
            v-model="form.content"
            :rows="5"
            type="textarea"
            placeholder="请输入内容"
          />
      </el-form-item>
	  <el-form-item label="发布时间" prop="time" v-if="!props.id">
		         <el-date-picker
		            v-model="value1"
		            type="datetime"
					size="large"
		            placeholder="选择日期时间"
		            :shortcuts="shortcuts"
					value-format="YYYY-MM-DD HH:mm:ss"
		        />
	  </el-form-item>
	  <div align="center">
		  <img :src="Head1"  style="height:65px;width:auto;margin-top: 10px;margin-left: 5px;">
		  <span style="color: red;font-size: 15px;">亲爱的管理员，您的每一条公告通知都对业主们至关重要，请仔细编辑哟！</span>
	  </div>
	   
      <el-form-item>
        <el-button type="primary" plain :icon="Save"
		@click="save(form.title,form.content,form.time)"
		>保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import Save from '@/components/icons/save'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import  {  FormInstance, FormRules } from 'element-plus'
import url from './util'
import { _axios,get, post } from '@/plugins/axios'
const Head1 = '../src/components/icons/CommunityIcon/1.jpg'
const emits = defineEmits(['update:show', 'getTableData','dialog:show'])
const props = defineProps(['id'])
const formObj = ref<FormInstance>()
console.dir(props.id)

//reactive根据数据库表格
const form = reactive({
	id: null,
	time:'',
  title: '',
  content: '',
  statue: ''
})
const rules=reactive({//校验规则
	title:[{
		required:true,message:'请输入标题',trigger:'blur'
	}],
	content:[{
		required:true,message:'请输入内容',trigger:'blur'
	}]
	// time:[{
	// 	required:true,message:'请输入时间',trigger:'blur'
	// }]
})
const save=(title,content,time)=>{
	post(props.id ? url.update : url.add, form, content => {
		emits('getTableData')
		console.dir(content)
	},formObj)
}

function getById(){
	get('/notice/getById',{id:props.id},content=>{
		for(const key in form){
			//判断一下key有没有，有再赋值，否则会被认定为类型Undefined，不好
			if(Object.prototype.hasOwnProperty.call(content,key)) {
				form[key] = content[key]
			}
		}
		console.dir(form)
	})
}
if(props.id){
	form.id=props.id
	getById()
}
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const shortcuts = [
  {
    text: '现在',
    value: new Date(),
  }]


</script>

<style scoped lang="scss">
.el-button{
	margin-left: 0;
}
.el-date-picker{
	 display: block;
	width: 100px;
}
</style>
